<script setup lang="ts">
defineProps({
  color: {
    type: String,
    required: true,
    default: 'green'
  }
});
</script>
<template>
  <div class="root">
    <div class="child">
      <div v-if="color === 'red'" class="light redLight"></div>
      <div v-else class="light noLight"></div>
    </div>
    <div class="child">
      <div v-if="color === 'yellow'" class="light yellowLight"></div>
      <div v-else class="light noLight"></div>
    </div>
    <div class="child">
      <div v-if="color === 'green'" class="light greenLight"></div>
      <div v-else class="light noLight"></div>
    </div>
  </div>
</template>

<style scoped>
.child {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.root {
  background-color: #111111;
  height: 23%;
  width: 5%;
  border: 3px #443 solid;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  padding: 0.75%;
  overflow: hidden;
}

.greenLight {
  background-color: #0d0;
  box-shadow: 0 0 40px #0d0;
}
.redLight {
  background-color: #ff0000;
  box-shadow: 0 0 40px #ff0000;
}

.yellowLight {
  background-color: yellow;
  box-shadow: 0 0 40px yellow;
}

.light {
  border-radius: 50%;
  width: 100%;
  padding-top: 100%;
}

.noLight {
  background-color: #443;
}
</style>
